<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>私有过滤器和全局过滤器</title>
    <script src="../lib/vue-2.6.12.js"></script>
    <link href="../image/favicon.ico" rel="shortcut icon">
</head>
<body>
    <div id="app">
        <p>message 的值为: {{ message | capi}}</p>
    </div>

    <div id="app2">
        <p>message 的值为: {{ message | capi}}</p>
    </div>


    <script>
        // 如果私有过滤器和全局过滤器名称相同,则就近原则,调用私有过滤器
        // 使用Vue.filter() 定义全局过滤器
        Vue.filter('capi',function (str) {
            const first = str.charAt(0).toUpperCase()
            const other = str.slice(1)
            return first + other
        })

        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello World!'
            },
            methods: {

            }
        })

        const vm2 = new Vue({
            el: '#app2',
            data: {
                message: 'hello Vue.js!'
            },
            methods: {

            }
        })
    </script>
</body>
</html>